<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="Evernote Windows/303244 (zh-CN, DDL); Windows/10.0.14393 (Win64);"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 12pt;
    }
  </style>
</head>
<body>
<a name="591"/>

<div>
<span><div><a name="573" style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"></a><div><b><span style="background-color: rgb(255, 250, 165);">text-shadow属性设置文本阴影，添加多个阴影使用逗号分隔</span></b></div><div><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法： text-shadow:  v  h  blur color;</div><div><br/></div><div>p:nth-of-type(1){</div><div>     text-shadow:0 30px 10px red,0 60px 5px green;</div><div>}</div></div><div><br/></div><div>v：水平位置</div><div>h：垂直位置</div><div>blur：阴影模糊度</div><div>color：阴影颜色</div><div><br/></div><div><br/></div><div><b><span style="background-color: rgb(255, 250, 165);">word-wrap属性对单词进行断句</span></b></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.148438); background-color: rgb(251, 250, 248);"><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">语法：word-wrap:normal | break-word;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"><br/></span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">div:nth-of-type(2){</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">     width:120px;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">     background:green;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">     margin-top:100px;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">     word-break:break-all;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">}</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"><br/></span></span></span></div><div><img src="DAY3课堂笔记（上午）_files/ScreenClip.png" type="image/png" style="height: auto;"/></div></div><div><br/></div><div>normal：按照浏览器默认方式处理</div><div>break-word：对长单词进行断句处理</div><div><br/></div><div><br/></div><div><b><span style="background-color: rgb(255, 250, 165);">word-break属性自动换行</span></b></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.148438); background-color: rgb(251, 250, 248);"><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">语法：word-break:normal | break-all | keep-all;</span></span></span></div><div><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">div:nth-of-type(3){</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">      width:120px;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">      background:green;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">      margin-top:100px;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">      word-break:keep-all;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">}</span></span></span></div><div><img src="DAY3课堂笔记（上午）_files/ScreenClip [1].png" type="image/png" style="height: auto;"/></div><div><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">div:nth-of-type(3){</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">      width:120px;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">      background:green;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">      margin-top:100px;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">      word-break:keep-all;</span></span></span></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">}</span></span></span></div><div><img src="DAY3课堂笔记（上午）_files/ScreenClip [2].png" type="image/png" style="height: auto;"/></div><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"><br/></span></span></span></div><div><br/></div></div><div><br/></div><div>normal：按照浏览器默认方式处理</div><div>break-all：允许在单词内换行</div><div>keep-all：只允许在半角空格或连字符处换行</div><div><br/></div><div><br/></div><div><span style="background-color: rgb(255, 250, 165);">@font-face指定字体样式</span></div><div><br/></div><table style="border-collapse: collapse; margin-left: 0px; table-layout: fixed;width:426px;"><tr><td style="font-family: 微软雅黑; font-size: 12pt; border: 1px solid rgb(211, 211, 211); padding: 10px; margin: 0px;width:24.413145539906104%;"><div>.ttf</div></td><td style="font-family: 微软雅黑; font-size: 12pt; border: 1px solid rgb(211, 211, 211); padding: 10px; margin: 0px;width:75.35211267605634%;"><div><span style="color: rgb(45, 79, 201);"><span style="font-family: &quot;Microsoft YaHei&quot;, 微软雅黑, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important; background-color: rgb(255, 255, 255);">ttf字体是Windows和Mac的最常见的字体</span></span></div><div><span style="color: rgb(64, 64, 64); font-family: &quot;Microsoft YaHei&quot;, 微软雅黑, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important; background-color: rgb(255, 255, 255);">IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+</span></div></td></tr><tr><td style="font-family: 微软雅黑; font-size: 12pt; border: 1px solid rgb(211, 211, 211); padding: 10px; margin: 0px; width: 83px;"><div>.otf</div></td><td style="font-family: 微软雅黑; font-size: 12pt; border: 1px solid rgb(211, 211, 211); padding: 10px; margin: 0px; width: 300px;"><div><span style="color: rgb(45, 79, 201);"><span style="font-family: &quot;Microsoft YaHei&quot;, 微软雅黑, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important; background-color: rgb(255, 255, 255);">otf字体被认为是一种原始的字体格式</span></span></div><div><span style="color: rgb(64, 64, 64); font-family: &quot;Microsoft YaHei&quot;, 微软雅黑, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important; background-color: rgb(255, 255, 255);">Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+</span></div></td></tr><tr><td style="font-family: 微软雅黑; font-size: 12pt; border: 1px solid rgb(211, 211, 211); padding: 10px; margin: 0px; width: 83px;"><div>.woff</div></td><td style="font-family: 微软雅黑; font-size: 12pt; border: 1px solid rgb(211, 211, 211); padding: 10px; margin: 0px; width: 300px;"><div><span style="color: rgb(45, 79, 201);"><span style="font-family: &quot;Microsoft YaHei&quot;, 微软雅黑, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important; background-color: rgb(255, 255, 255);">woff字体是Web字体中最佳格式</span></span></div><div><span style="color: rgb(64, 64, 64); font-family: &quot;Microsoft YaHei&quot;, 微软雅黑, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important; background-color: rgb(255, 255, 255);">IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+</span></div></td></tr><tr><td style="font-family: 微软雅黑; font-size: 12pt; border: 1px solid rgb(211, 211, 211); padding: 10px; margin: 0px; width: 83px;"><div>.eot</div></td><td style="font-family: 微软雅黑; font-size: 12pt; border: 1px solid rgb(211, 211, 211); padding: 10px; margin: 0px; width: 300px;"><div><span style="color: rgb(45, 79, 201);"><span style="font-family: &quot;Microsoft YaHei&quot;, 微软雅黑, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important; background-color: rgb(255, 255, 255);">eot字体是IE专用字体</span></span></div><div><span style="color: rgb(64, 64, 64); font-family: &quot;Microsoft YaHei&quot;, 微软雅黑, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; float: none; display: inline !important; background-color: rgb(255, 255, 255);">IE4+</span></div></td></tr></table><div><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><a name="573">字体转换器地址：</a><a href="http://www.font2web.com/">http://www.font2web.com/</a></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>@font-face{</div><div>     font-family: font1;</div><div>     src:url(&quot;fonts/font1.otf&quot;),url(&quot;fonts/font1.eot&quot;),url(&quot;fonts/font1.svg&quot;);</div><div>}</div><div><br/></div><div>p{</div><div>    <span style="color: rgb(255, 0, 0);">font-family: font1;</span></div><div>}</div></div></div><div><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);">background-origin设置背景图定位原点</span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><br/></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：background-origin:padding-box | content-box | border-box;</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><br/></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">padding-box：参照padding盒定位，背景图的原点在padding盒原点处</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">content-box：参照content盒定位，背景图的原点在content盒原点处</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">border-box：参照border盒定位，背景图的原点在border盒原点处</div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><span style="font-size: 13px;"><span style="color: rgb(255, 0, 0);">注意：使用该属性时要将背景图设置为no-repeat</span></span></div><div><span style="font-size: 13px;"><span style="color: rgb(255, 0, 0);"><br/></span></span></div><div><s><img src="DAY3课堂笔记（上午）_files/ScreenClip [3].png" type="image/png" style="height:auto;" width="421"/></s></div><div><s><br/></s></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background-color: rgb(255, 250, 165);"><b>background-size设置背景图大小</b></span></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：background-size:auto | contain | cover | length | percentage;</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">auto：按照背景图实际大小设置背景图</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">contain：将背景图按照比例缩放到填满容器</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">cover：将背景图缩放至完全覆盖整个容器</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">length：设置背景图宽度 高度</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div>percentage：按照百分比设置背景图宽高</div></div><div><s><br/></s></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>代码1：</div><div>background-size:30px 30px,10px 10px; //设置多个背景图大小可以使用逗号分隔</div><div><s><img src="DAY3课堂笔记（上午）_files/ScreenClip [4].png" type="image/png" style="height:auto;" width="247"/></s></div><div><s><br/></s></div><div>代码2：</div><div>background-size:10% 10%,15% 15%; 通过百分比设置背景图像大小</div><div><br/></div><div>代码3：</div><div>background-size:contain;</div><div><img src="DAY3课堂笔记（上午）_files/ScreenClip [5].png" type="image/png" style="height:auto;" width="394"/></div><div><br/></div><div>代码4：</div><div>background-size:cover;</div><div><img src="DAY3课堂笔记（上午）_files/ScreenClip [6].png" type="image/png" style="height:auto;" width="393"/></div></div><div><s><br/></s></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background-color: rgb(255, 250, 165);"><b>box-sizing设置盒模型组成模式</b></span></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：box-sizing：content-box | border-box | inherit;</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">content-box： content + padding + border = 实际大小</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">border-box：  content + padding + border = 所设置的大小</div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div>inherit：继承父元素的box-sizing属性值</div><div><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);">border-image-source设置边框图片的路径</span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：border-image-source:url(img/1.png);</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 13px;"><span style="color: rgb(255, 0, 0);">注意：如果不使用slice切割则图片作为边框的四个角</span></span></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);">border-image-slice将边框图片切割为九宫格</span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.148438); background-color: rgb(251, 250, 248);"><div><span style="color: rgb(51, 51, 51);"><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;">语法：border-image-slice:number | percentage | fill;</span></span></span></div><div><img src="DAY3课堂笔记（上午）_files/ScreenClip [7].png" type="image/png"/></div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><br/></div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div>number：4个值，<span style="color: rgb(255, 0, 0);">没有单位代表px</span>，上切高（1区），右切宽（2区），下切高（3区），左切宽（4区）</div></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div>fill：将边框图片中间（第9区）部分填充给padding盒</div><div><br/></div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="background-color: rgb(255, 250, 165);"><b>border-image-width设置边框宽度</b></span></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：border-image-width:length | number | percentage | auto;</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">length：等同border-width</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">number：border-width的倍数，没有单位</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">percenter：宽高的百分比</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">auto：根据slice属性值计算</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);">border-image-outset设置边框超出border盒的量</span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：border-image-outset：length | number;</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">number：border-width的倍数</div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);">border-image-repeat设置图片边框铺排方式</span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：border-image-repeat：stretch | repeat | round;</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">该属性接收2个属性值，第一个属性值代表横向区域，第二个值代表纵向区域</div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><span style="color: rgb(255, 0, 0);">stretch：拉伸（默认值）</span></div><div><img src="DAY3课堂笔记（上午）_files/ScreenClip [8].png" type="image/png" style="height:auto;" width="142"/></div><div><br/></div></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div>repeat：重复平铺</div><div><img src="DAY3课堂笔记（上午）_files/ScreenClip [9].png" type="image/png" style="height:auto;" width="142"/></div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">round：铺满（该属性值类似repeat，当repeat无法完整平铺时，round会进行自适应缩放）</div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><img src="DAY3课堂笔记（上午）_files/ScreenClip [10].png" type="image/png" style="height:auto;" width="142"/></div><div><br/></div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);">border-image合并语法</span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(251, 250, 248);"><div>语法：border-image：source slice/width/outset repeat;</div></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><span style="background-color: rgb(255, 250, 165);"><br/></span></b></div><div style="color: rgb(0, 0, 0); font-family: 微软雅黑; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div>注意：border-image-slice、border-image-width、border-image-outset使用斜线分隔</div></div></div><div><span style="font-size: 13px;"><span style="color: rgb(255, 0, 0);"><br/></span></span></div></div></span>
</div></body></html> 